<template>
  <div>
    <el-card class="box-card">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-input v-model="queryData.title" @clear="getList" placeholder="请输入内容" class="input-with-select">
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-button @click="clearVal">清除</el-button>
            <el-button type="primary" @click="getList">搜索</el-button>
          </el-col>
        <el-button style="float: right; padding: 10px 10px" type="success" icon="el-icon-edit" @click="setPermissoins">设置操作权限</el-button>
        </el-row>
         <el-alert type="info" show-icon class="alerts" :closable="false">共有{{ counts }}条数据</el-alert>
        <el-table
        ref="multipleTable"
        :data="list"
        stripe
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="用户名"
          prop="title"
          width="750">
        </el-table-column>
        <el-table-column
          label="日期" width="730">
          <template slot-scope="scope">
              {{ scope.row.create_date | parseTimeByString("{y}-{m}-{d}") }}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="editList(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteList(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
       <el-pagination
       style="float:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[2, 10, 30, 40]"
        :page-size="queryData.pagesize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts">
      </el-pagination>
    </el-card>
    <!-- 编辑列表 -->
    <el-dialog
     @close='editCate'
      title="编辑权限组"
      :visible.sync="dialogVisibleEdit"
      width="50%">
      <el-form  label-width="100px" class="demo-ruleForm" :model="editNewList" :rules="editNewListRules" ref="editNewListRef">
        <el-form-item label="用户名" prop="title" style="width: 500px">
          <el-input v-model="editNewList.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <el-tree
            ref="tree"
            :data="menuList"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="keys"
            :props="defaultProps">
          </el-tree>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="enterEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增权限组 -->
    <el-dialog
      @close='addCate'
      title="新增权限组"
      :visible.sync="adddialogVisibleEdit"
      width="50%">
      <el-form label-width="100px" class="demo-ruleForm" :rules="addPermissionRules" :model="addNewList" ref="addNewListRef">
        <el-form-item  label="用户名" prop="title" style="width: 500px">
          <el-input v-model="addNewList.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <el-tree
            ref="tree"
            :data="menuList"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps">
          </el-tree>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="addEnterEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { list, update, remove, add, detail } from '@/api/base/permissions.js'
import { list as qxlist } from '@/api/base/menus.js'
export default {
  data () {
    return {
      list: [],
      listLoading: true,
      counts: 0,
      queryData: {
        page:1,
        pagesize: 2,
        title: ''
      },
      menuList: [],
      dialogVisibleEdit: false,
      editNewList: {},
      editNewListRules: {
        title: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      keys: [],
      // 树形组件数据
      defaultProps: {
        children: "childs",
        label: "title",
      },
      // 添加权限对话框
      adddialogVisibleEdit: false,
      // 添加权限校验
      addPermissionRules: {
        title: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      // 表单数据
      addNewList: {
        title: '',
        permissions: []
      },
    }
  },

  created () {
    this.getList()
  },

  methods: {
    // 获取列表
    async getList () {
      this.listLoading = true
      const { data: res } = await list(this.queryData)
      this.list = res.list
      this.listLoading = false
      this.counts = res.counts
      console.log(res)
    },
    handleSelectionChange () {},
   // 选择了每页多少条
    handleSizeChange (val) {
      this.queryData.pagesize = val
      this.getList()
    },
    // 页码发生变化
    handleCurrentChange (val) {
      this.queryData.page = val
      this.getList()
    },
    // 编辑权限
    editList (row) {
      this.getMenusList()
      // this.perList(row)
      this.dialogVisibleEdit = true
      this.editNewList = JSON.parse(JSON.stringify(row))
      detail({id: row.id}).then(res => {
      this.keys = res.data.permissions
      })
    },
    // 清空
    // 获取菜单列表数据
    async getMenusList () {
      const { data: res } = await qxlist()
      this.menuList = res
      // console.log(this.menuList)
    },
      // 添加树形控件获取的id
      // handleCheckChange (data, checked, indeterminate) {
      //  this.addNewList.permissions.push(data.id)
      // },
    // 修改权限
    enterEdit () {
       this.$refs.editNewListRef.validate(async flag => { 
         if ( !flag ) return
      this. editNewList.permissions = this.$refs.tree.getCheckedKeys()
       if ( this.editNewList.permissions.length <= 0) return this.$message.error('请选择权限点')
      const res = await update(this.editNewList)
      if ( res.status !== 200 ) return this.$message.error('修改失败')
      this.keys = this.$refs.tree.getCheckedKeys()
      this.$message.success('修改成功')
      this.dialogVisibleEdit = false
      this.getList()
      })
    },
    // 权限列表详情
    // async perList (row) {
    //   const { data: res } = await detail(row)
    //   this.keys = res.permissions
    //   console.log(this.perLists)
    // },
    // 清空修改表单验证
     editCate () {
      this.$refs.editNewListRef.resetFields()
    },
    // 删除
    deleteList (row) {
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then( async() => {
        const res = await remove(row)
        if ( res.status !== 200 ) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        this.getList()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 添加权限功能
    setPermissoins () {
      this.getMenusList()
      this.adddialogVisibleEdit = true
      // console.log(this.addNewList)
    },
    // 点击确认添加权限
    addEnterEdit () {
       this.$refs.addNewListRef.validate(async flag => { 
         if ( !flag ) return
      this.addNewList.permissions = this.$refs.tree.getCheckedKeys()
      if ( this.addNewList.permissions.length <= 0) {return this.$message.error('请选择权限点')
      }else {
      this. addNewList.permissions = this.$refs.tree.getCheckedKeys()
      const res  = await add(this.addNewList)
      if ( res.status !== 200 ) return this.$message.error('获取失败')
      this.$message.success('获取成功')
      this.adddialogVisibleEdit = false
      this.getList()
      }
    })
  },
    // 清空添加表单
    addCate () {
      this.$refs.addNewListRef.resetFields()
    },
    // 点击清空搜索
    clearVal () {
      this.queryData.title = ''
      this.getList()
    }
  }
}
</script>

<style scoped lang='less'>
.el-card {
  margin: 20px;
  .alerts {
    margin: 20px 0;
  }
  .el-pagination {
    margin: 10px;
  }
}
</style>
